<template>
  <div>
    <van-nav-bar title="面经详情" left-arrow @click-left="onClickLeft" />
    <div class="detail">
      <h2>{{ obj.stem }}</h2>
      <div class="info">
        <span>{{ obj.createdAt }}</span>
        <span> | </span>
        <span>{{ obj.views }} 浏览量</span>
        <span> | </span>
        <span>{{ obj.likeCount }} 点赞数</span>
      </div>

      <div class="qian">
        <img :src="obj.avatar" alt="" />
        <span>{{ obj.creator }}</span>
      </div>

      <div class="content" v-html="obj.content"></div>
    </div>
    <div class="icon">
      <van-icon
        name="like-o"
        size="20px"
        @click="like"
        :class="{ active: obj.likeFlag }"
      />
      <van-icon
        name="star-o"
        size="20px"
        @click="star"
        :class="{ active: obj.collectFlag }"
      />
    </div>
  </div>
</template>

<script>
import { getDetail, update } from "@/api/user";

export default {
  data() {
    return {
      obj: {},
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async like() {
      await update({ id: this.$route.params.id, optType: 1 });
      this.obj.likeFlag = !this.obj.likeFlag;
      if (this.obj.likeFlag) {
        this.$toast("点赞成功");
      } else {
        this.$toast("取消点赞");
      }
    },

    async star() {
      await update({ id: this.$route.params.id, optType: 2 });
      this.obj.collectFlag = !this.obj.collectFlag;
      if (this.obj.collectFlag) {
        this.$toast("收藏成功");
      } else {
        this.$toast("取消收藏");
      }
    },

    async getInfo() {
      const res = await getDetail(this.$route.params.id);
      // console.log(res);
      this.obj = res.data.data;
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
.icon {
  position: fixed;
  bottom: 100px;
  right: 0;
  .van-icon {
    margin-right: 20px;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 1px 1px 10px #ccc;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    &.active {
      background: #fec635;
      color: #fff;
    }
  }
}
.detail {
  padding: 0 15px;
  .info {
    color: grey;
    font-size: 12px;
  }
}
.qian {
  display: flex;
  align-items: center;
  color: grey;
  font-size: 12px;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

.content {
  text-indent: 2em;
}
</style>
